<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Business Tabs Example</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f0f4f8;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 40px auto;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .tab-container {
            display: flex;
            border-bottom: 2px solid #007bff;
        }
        .tab {
            flex: 1;
            padding: 12px;
            margin-right: 1px;
            border: 1px solid #ddd;
            border-bottom: none;
            background-color: #f9f9f9;
            text-align: center;
            font-weight: bold;
            color: #007bff;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
            border-radius: 8px 8px 0 0;
        }
        .tab:hover {
            background-color: #e2e6ea;
        }
        .tab.active {
            background-color: #007bff;
            color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
        }
        .tab-content {
            position: relative;
            overflow: hidden;
            height: 0;
            opacity: 0;
            transition: opacity 0.5s, height 0.5s ease-out;
            background-color: #f9f9f9;
            padding: 0 20px;
            border-radius: 0 0 8px 8px;
        }
        .tab-content.active {
            height: auto;
            opacity: 1;
            padding: 20px;
        }
        .tab-content h2 {
            margin-top: 0;
            color: #007bff;
        }
        .tab-content p {
            line-height: 1.6;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="tab-container">
            <div id="tab1-button" class="tab" onclick="showTab('tab1')">Company Overview</div>
            <div id="tab2-button" class="tab" onclick="showTab('tab2')">Contact Us</div>
        </div>

        <div id="tab1" class="tab-content">
            <h2>Company Overview</h2>
            <p>Welcome to [Company Name]. We are a leading firm specializing in [industry]. Our commitment to excellence and innovation drives us to deliver outstanding results for our clients. Learn more about our services and how we can assist you in achieving your business goals.</p>
        </div>

        <div id="tab2" class="tab-content">
            <h2>Contact Us</h2>
            <p>If you have any questions or need further information, please reach out to us:</p>
            <p>Email: info@[companydomain].com<br>
               Phone: +1 (123) 456-7890<br>
               Address: 123 Business St, Suite 100, City, State, ZIP</p>
        </div>
    </div>

    <script>
        function showTab(tabId) {
            // Hide all tab content and remove active class from all tabs
            var contents = document.querySelectorAll('.tab-content');
            contents.forEach(function(content) {
                content.classList.remove('active');
            });

            var tabs = document.querySelectorAll('.tab');
            tabs.forEach(function(tab) {
                tab.classList.remove('active');
            });

            // Show the selected tab content and set the clicked tab as active
            var activeTab = document.getElementById(tabId);
            if (activeTab) {
                activeTab.classList.add('active');
            }

            var activeTabButton = document.getElementById(tabId + '-button');
            if (activeTabButton) {
                activeTabButton.classList.add('active');
            }
        }

        // Show the first tab by default
        showTab('tab1');
    </script>

</body>
</html>
